<!--vue模板-->
<template>

   <div>
      <el-button type="primary" @click="back">返回</el-button>
   </div>

  <div class="title">采购申请详情</div>
  <!--基本信息-->
  <el-form>
    <el-row style="height: 40px; line-height: 40px">
      <el-col :span="24">&nbsp;&nbsp;基本信息</el-col>
    </el-row>

    <el-row>
      <el-col :span="2">单据主题:</el-col>
      <el-col :span="4">
        <el-input v-model="purchase.subject"></el-input>
      </el-col>
      <el-col :span="2">单据编号:</el-col>
      <el-col :span="4">
        <el-input :disabled="true" placeholder="保存后自动生成"></el-input>
      </el-col>
      <el-col :span="2">来源单据类型:</el-col>
      <el-col :span="4">
        <el-select
          class="m-2"
          placeholder="Select"
          v-model="purchase.sourceType"
        >
          <el-option
            v-for="item in sourceOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
      <el-col :span="2">来源单据:</el-col>
      <el-col :span="4">
        <el-input v-model="purchase.sourceSubject">
          <template #suffix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="2">采购申请类别:</el-col>
      <el-col :span="4">
        <el-select class="m-2" placeholder="Select" v-model="purchase.category">
          <el-option
            v-for="item in purchaseTypes"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
      <el-col :span="2">是否需要询价:</el-col>
      <el-col :span="4">
        <el-radio-group class="ml-4" v-model="purchase.isenquiry">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="2">制单日期:</el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="purchase.makeDate"
          type="date"
          placeholder="Pick a date"
        />
      </el-col>
      <el-col :span="2">制单人员</el-col>
      <el-col :span="4">
        <el-input v-model="purchase.makeUser"></el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="2">关联项目:</el-col>
      <el-col :span="4">
        <el-input v-model="purchase.project">
          <template #suffix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="2"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="2"></el-col>
      <el-col :span="4"></el-col>
    </el-row>

    <el-row style="height: 110px; line-height: 110px" class="btm">
      <el-col :span="2">备注:</el-col>
      <el-col :span="22">
        <el-input type="textarea" :rows="3" resize="none"></el-input>
      </el-col>
    </el-row>
  </el-form>

  <!--采购申请明细-->

  <div class="detail">采购申请明细</div>
  <el-table :data="purchase.purchaseDetails" style="width: 100%" stripe border>
    <el-table-column
      type="selection"
      width="40"
      header-align="center"
      align="center"
    />
    <el-table-column
      type="index"
      label="序号"
      width="80"
      header-align="center"
      align="center"
    />
    <el-table-column
      label="产品名称"
      prop="productName"
      width="180"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.productName"
          size="small"
          v-model="row.productName"
        >
          <template #suffix>
            <el-icon
              class="el-input__icon"
              @click="tosearch(row.index)"
              style="cursor: pointer"
              ><search
            /></el-icon>
          </template>
        </el-input>
        <span v-else>{{ row.productName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="产品编号"
      prop="productCode"
      width="160"
      header-align="center"
    />
    <el-table-column
      label="规格型号"
      prop="specification"
      width="180"
      header-align="center"
    />
    <el-table-column
      label="单位"
      prop="unit"
      width="80"
      header-align="center"
    />
    <el-table-column
      label="建议供应商"
      prop="supplier"
      width="180"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.supplier"
          v-model="row.supplier"
        ></el-input>
        <span v-else>{{ row.supplier }}</span>
      </template>
    </el-table-column>
    <el-table-column label="数量" prop="num" width="140" header-align="center">
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          :min="0"
          size="small"
          v-if="row.active && row.active.num"
          v-model="row.num"
        ></el-input-number>
        <span v-else>{{ row.num }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="单价"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price.toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="总金额"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          :precision="2"
          style="width: 110px"
          size="small"
          v-if="row.active && row.active.total"
          v-model="row.total"
        ></el-input-number>
        <span v-else>{{ row.total.toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="需用日期"
      prop="needDate"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-date-picker
          v-if="row.active && row.active.needDate"
          v-model="row.needDate"
          style="width: 110px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder=""
          size="small"
        />
        <span v-else>{{ row.needDate }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="note" header-align="center" width="200">
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.note"
          v-model="row.note"
        ></el-input>
        <span v-else>{{ row.note }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="库存信息"
      prop="store"
      width="180"
      header-align="center"
    />
  </el-table>

  <!--计算总金额 -->
  <el-row style="height: 50px; line-height: 50px">
    <el-col :span="4" style="text-align: right; padding-right: 10px">
      总金额:
    </el-col>
    <el-col :span="8">
      <el-input disabled v-model="purchase.money"></el-input>
    </el-col>
    <el-col :span="4" style="text-align: right; padding-right: 10px">
      数量合计:
    </el-col>
    <el-col :span="8">
      <el-input disabled v-model="totalnum"></el-input>
    </el-col>
  </el-row>


  <!--附件-->
  <attachment :attData="purchase.attachments"></attachment>
</template>

<!--vue 组件选项定义-->
<script>
import { Search } from "@element-plus/icons-vue";
import Attachment from "../../components/Attachment.vue";
export default {
  data() {
    return {
      //来源
      sourceOptions: [],
      purchaseTypes:[],
      isShowChooseProduct: false, //是否显示选择产品
      purchase: {},
    };
  },

  computed: {
    totalnum() {
      let tmp = 0;
      //遍历purchase.purchaseDetails
      if (!this.purchase.purchaseDetails) return 0;
      this.purchase.purchaseDetails.forEach((el) => {
        tmp += parseInt(el.num);
      });
      return tmp;
    },
  },

  components: {
    Search,
    Attachment
  },
  created() {
    this.init(this.$route.params.id);
    this.querySourceType();
  },
  methods: {
    
    //查询单据来源类型 
    querySourceType(){
       this.$http.get("/api/dict/queryDictByTypes",{types:"sourceType,purchaseType"})
       .then(res=>{
          if(res.code==200){
            this.sourceOptions=res.result['sourceType'];
            this.purchaseTypes=res.result['purchaseType'];
          }
       })
    },
    back(){
      this.$router.back();
    },
    init(id) {
      this.$http.get("/api/purchase/get", { id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.purchase = res.result;
          this.purchase.sourceType=parseInt( res.result.sourceType)+"";
        }
      });
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-row) {
  border: #c0ccdd solid 1px;
  border-bottom-style: none;
  height: 50px;
  line-height: 50px;
  background-color: #f9fcff;
}
:deep(.el-col-2) {
  text-align: right;
  padding-right: 10px;
}

:deep(.el-textarea) {
  vertical-align: middle;
}
.btm {
  border-bottom: #c0ccdd solid 1px;
}

.detail {
  height: 40px;
  line-height: 40px;
  border: #c0ccdd solid 1px;
  background-color: #f9fcff;
  margin-top: 20px;
  padding-left: 10px;
  border-bottom-style: none;
}

.title {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  color: #444;
}
</style>
